<template>
    <div ref="chartContainer" style="width: 600px; height: 400px"></div>
</template>

<script setup lang="ts">
import { ref, watch, onMounted } from 'vue'
import * as echarts from 'echarts'

// 接收父组件传递的数据
const props = defineProps({
    chartData: Object // 图表数据
})

const chartContainer = ref<HTMLDivElement | null>(null)

// 初始化图表
const initChart = (data: any) => {
    const myChart = echarts.init(chartContainer.value!)

    const option = {
        title: {
            text: '项目类别分布',
            left: 'center',
            top: '5%'
        },
        tooltip: {
            trigger: 'axis'
        },
        legend: {
            data: ['数量', '金额'] // 图例显示数量和金额
        },
        xAxis: {
            type: 'category',
            data: data.categories,
            axisLabel: {
                rotate: 15, // 如果需要，旋转标签避免重叠
                align: 'center', // 标签居中对齐
                verticalAlign: 'middle', // 垂直居中对齐
                margin: 50 // 标签与轴线的距离
            }
        },
        yAxis: [
            {
                type: 'value',
                name: '数量',
                position: 'left',
                axisLine: { lineStyle: { color: '#191313' } },
                axisLabel: { formatter: '{value}' }
            },
            {
                type: 'value',
                name: '金额（万元）',
                position: 'right',
                axisLine: { lineStyle: { color: '#191313' } },
                axisLabel: { formatter: '{value}' }
            }
        ],
        series: [
            {
                name: '数量',
                type: 'bar', // 数量的柱状图
                data: data.counts,
                itemStyle: {
                    color: '#68afff' // 柱状图颜色
                }
            },
            {
                name: '金额',
                type: 'line', // 金额的折线图
                data: data.amounts,
                yAxisIndex: 1, // 使用右侧的 y 轴
                itemStyle: {
                    color: '#e51616' // 折线图颜色
                },
                lineStyle: {
                    width: 2 // 折线宽度
                }
            }
        ]
    }

    myChart.setOption(option)
}

// 监听传递的数据更新图表
watch(
    () => props.chartData,
    (newData) => {
        initChart(newData)
    }
)

// 初始加载时渲染图表
onMounted(() => {
    if (props.chartData) {
        initChart(props.chartData)
    }
})
</script>

<style scoped>
/* 可选：为图表容器添加样式 */
</style>
